/*
 * @Description:
 * @Author: Cxy
 * @Date: 2024-03-12 16:15:56
 * @LastEditors: Cxy
 * @LastEditTime: 2024-03-13 09:04:15
 * @FilePath: \blogAdmin\play\src\components\XySkinPeel\src\index.tsx
 */

import XyIcon from '@/components/XyIcon'
import { configStore } from '@/stores/config'
import './index.scss'
export default defineComponent({
  name: 'XySkinPeel',
  props: {
    type: {
      type: String,
      default: 'switch'
    },
    fontSize: {
      type: Number,
      default: 20
    }
  },
  setup(props) {
    const { config } = storeToRefs(configStore)

    const switchThem = () => {
      let theme = config.value.darkLight
      if (theme === 'dark') {
        theme = 'light'
      } else if (theme === 'light') theme = 'dark'
      configStore.changeDarkLight(theme)
    }

    return () => (
      <div
        style={{ '--XySkinPeel-font-size': props.fontSize }}
        class={props.type === 'switch' ? 'com-xySkinPeel' : ''}
        onClick={switchThem}
      >
        {props.type === 'switch' ? (
          <div class="com-xySkinPeel-icon layout-header-right-icon">
            <XyIcon icon={config.value.darkLight} />
          </div>
        ) : (
          <div class="layout-header-right-icon">
            <XyIcon icon={config.value.darkLight} />
          </div>
        )}
      </div>
    )
  }
})
